<template>
    <div class="con">
        <my-header :show.sync="show"></my-header>
        <!-- <button @click="show=!show">1</button> -->
        <van-popup v-model="show" position="bottom" :style="{ height: '50%' }" >
            <van-button type="default" @click="find()">三天</van-button>
            <van-button type="default" @click="find()">五天</van-button>
            <van-button type="default" @click="find()">七天</van-button>
            <!-- <van-button type="primary" ></van-button> -->
        </van-popup>
        <ul class="tab">
            <li >全部{{total}}</li>
            <li>已使用</li>
            <li>未使用</li>
        </ul>

        <ul>
            <li v-for="(item,index) in coupon" :key="index">
                <card :item="item"></card>
            </li>
        </ul>
    </div>
</template>
<script>
import myHeader from "../components/myHeader";
import card from "../components/card";
export default {
  data() {
    return {
      coupon: [],
      tab: ["全部", "已使用", "未使用"],
      tabIndex: 0,
      show:false
    };
  },
  components: {
    myHeader,
    card
  },
  methods: {
    
  },
  computed:{
    total(){
       return this.coupon.length
    }
  },
  created() {
    this.$axios.get("data.json").then(res => {
      console.log(res);
      this.coupon = res.data.cuponData;
    });
  }
};
</script>
<style lang="scss" scoped>
.con {
  width: 100%;
  height: 100%;
  background: #f5f5f5;
}
.tab {
  display: flex;
  align-items: center;
  justify-content: space-around;
  width: 100%;
  height: 50px;
  background: #9cb54e;
  color: #fff;
  margin-bottom: 5px;
}
.active {
  color: #eb4929;
}
</style>
